<div class="workshop-edit">
  
  <!-- toolbar edit-->
  <%= render partial: 'edit_toolbar' %>

  <!-- Header -->
  <div class="wa_activity_wrapper wa_activity_wrapper_edit header_workshop ">
    <div class="layout_workshop">
      <div class="wa_activity_actions">
        <ul>
          <li>
            <a title="<%= t('excursion.actions.edit') %>" class="actions_tooltip" data-placement="bottom" data-toggle="tooltip" href=<%= edit_details_path(@workshop) %>><i class="fa fa-edit"></i></a>
          </li>
        </ul>
      </div>
      <% if @workshop.banner.present? %>
        <!--banner-->
        <div style='background-image: url(<%=@workshop.banner.url(:large)%>);width: 100%;height: 100px;' class=""></div>
      <% end %>
      <!--avatar-->
      <div class="container-img_WS">
        <div style='background-image: url(<%=@workshop.thumbnail_url%>)' class="img-box resource-center workshop_thumbnail"></div>
      </div>
      <section class="information">
        <!--title-->
        <div class="name">
          <h2 class="title_WS main_title_WS">
            <%= @workshop.title %>
          </h2>
        </div>
        <!--description-->
        <p class="description description_WS">
          <%= @workshop.description %>
        </p>
      </section>
    </div>
  </div>


  <!-- Workshop Activities -->

  <ul class="workshop_activities_list workshop_activities_list_edit">
    <% @workshop_activities.each do |workshop_activity| %>
      <% 
        object = workshop_activity.object
        className = object.class.to_s
        classNameUnderscore = className.underscore
        classNameTableize = className.tableize
        hasEditPartial = lookup_context.template_exists?("edit", classNameTableize, true)
      %>
      <li workshop_activity_id="<%= workshop_activity.id %>" class="workshop_element" type="<%= workshop_activity.wa_type %>">
        <div class="wa_activity_wrapper wa_activity_wrapper_edit">
          <div class="wa_activity_edit_tools">
            <ul>
              <li title="<%= t('categories.dragandrop.dragt1') %>" class="actions_tooltip sorthandler" data-placement="bottom" data-toggle="tooltip">
                <i class="fa fa-arrows"></i>
              </li>
              <% if hasEditPartial %>
                  <li title="<%= t('excursion.actions.edit') %>" class="actions_tooltip ui-state-default" data-placement="bottom" data-target="#WorkshopActivity" data-toggle="modal" data-remote=<%= "/#{classNameTableize}/#{object.id}/edit.partial" %>>
                    <i class="fa fa-edit"></i>
                  </li>
              <% end %>
              <li title="<%= t('excursion.actions.delete') %>" class="actions_tooltip " data-placement="bottom" data-toggle="tooltip">
                <%= link_to raw('<i class="fa fa-trash-o"></i>'), workshop_activity.object, :method => :delete, :confirm => t('workshop.activities.actions.confirm_delete') %>
              </li>
              <li class="toggleWorkshopActivity">
                <i class="fa fa-expand"></i>
              </li>
            </ul>
          </div>
          <div class="wa_activity_edit_minified">
            <%= workshop_activity.titleToPrint %>
          </div>
          <div class="layout_workshop">
            <%= render partial: "#{ className.tableize }/#{ classNameUnderscore }_edit", locals: {classNameUnderscore.to_sym => object, :prefix_id => "workshop_activity_"+workshop_activity.id.to_s} %>
          </div>
        </div>
      </li>
    <% end %>
  </ul>

  <%content_for :javascript do%>
    $("li.toggleWorkshopActivity").click(function(e){
      var contentDiv = $(e.target).parents(".wa_activity_wrapper_edit").find(".layout_workshop");
      var minifiedDiv = $(e.target).parents(".wa_activity_wrapper_edit").find(".wa_activity_edit_minified");
      
      if($(contentDiv).hasClass("wa_activity_closed")){
        $(contentDiv).removeClass("wa_activity_closed").addClass("wa_activity_open");
        $(contentDiv).show();
        $(minifiedDiv).css("display","none");
      } else {
        $(contentDiv).removeClass("wa_activity_open").addClass("wa_activity_closed");
        $(contentDiv).hide();
        $(minifiedDiv).css("display","inline-block");
      }
      e.stopPropagation();
      return false;
    });
  <%end%>


  <!-- Add Workshop Activity -->

  <div class="wa_add_activity_wrapper">
    <a href="#WorkshopActivities" class="" data-toggle="modal">
      <p><i class="fa fa-plus"></i><%= t('workshop.activities.actions.add_new_activity') %></p></a>
  </div>

  <!-- Add Workshop Activity Modal -->

  <div id="WorkshopActivities" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>-->
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
          <h3><%= t('workshop.actions.add_activity_title') %></h3>
        </div>
        <div class="modal-body tabbable tabs-below">
          <div id="workshop_activities_column1">
            <ul class="nav nav-tabs nav-stacked">
              <li>
                <a href="#tab_assignment" data-toggle="tab" activityId="assignment"><i class="fa fa-list-ol"></i><span class='hidden-xs'><%= t('workshop.activities.assignment.title') %></span></a>
              </li>
              <li class="active">
                <a href="#tab_resource" data-toggle="tab" activityId="resource"><i class="fa fa-file"></i><span class='hidden-xs'><%= t('workshop.activities.resource.title') %></span></a>
              </li>
              <li>
                <a href="#tab_resource_gallery" data-toggle="tab" activityId="resource_gallery"><i class="fa fa-th-large"></i><span class='hidden-xs'><%= t('workshop.activities.resource_gallery.title') %></span></a>
              </li>
              <li>
                <a href="#tab_contributions_gallery" data-toggle="tab" activityId="contributions_gallery"><i class="fa fa-th"></i><span class='hidden-xs'><%= t('workshop.activities.contributions_gallery.title') %></span></a>
              </li>
              <li>
                <a href="#tab_text" data-toggle="tab" activityId="text"><i class="fa fa-align-left"></i><span class='hidden-xs'><%= t('workshop.activities.text.title') %></span></a>
              </li>
            </ul>
          </div>
          <div id="workshop_activities_column2">
            <div class="tab-content">
              <div class="tab-pane" id="tab_assignment">
                <h4><%= t('workshop.activities.assignment.description') %></h4>
                <%= render partial: 'wa_assignments/new', :locals => {:workshop => @workshop} %>
              </div>
              <div class="tab-pane active" id="tab_resource">
                <h4><%= t('workshop.activities.resource.description') %></h4>

                <p><%= t('workshop.activities.resource.text') %> </p>
                <%= render partial: 'wa_resources/new', :locals => {:workshop => @workshop} %>
              </div>
              <div class="tab-pane" id="tab_resource_gallery">
                <h4><%= t('workshop.activities.resource_gallery.description') %></h4>

                <p><%= t('workshop.activities.resource_gallery.text') %> </p>
                <%= render partial: 'wa_resources_galleries/new', :locals => {:workshop => @workshop} %>
              </div>
              <div class="tab-pane" id="tab_contributions_gallery">
                <h4><%= t('workshop.activities.contributions_gallery.description') %></h4>

                <p><%= t('workshop.activities.contributions_gallery.text') %> </p>
                <%= render partial: 'wa_contributions_galleries/new', :locals => {:workshop => @workshop} %>
              </div>
              <div class="tab-pane" id="tab_text">
                <h4><%= t('workshop.activities.text.description') %></h4>

                <p><%= t('workshop.activities.text.text') %> </p>
                <%= render partial: 'wa_texts/new', :locals => {:workshop => @workshop} %>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <p>
            <button class="btn btn-primary submitWorkshopActivityFake" data-loading-text="<%= t('workshop.actions.adding_activity_button') %>"><%= t('workshop.actions.add_activity_button') %></button>
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Model Workshop Activity Edit-->

  <div id="WorkshopActivity" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content"></div>
    </div>
  </div>

  <% content_for :javascript do %>
      $('#WorkshopActivities').on('shown.bs.modal', function(){
      });

      $('#WorkshopActivities').on('hidden.bs.modal', function(){
      });

      $('#WorkshopActivity').on('hidden.bs.modal', function(){
        $(this).removeData('bs.modal');
      });

      $(document).on( "click", "#WorkshopActivities .submitWorkshopActivityFake", function(){
        $(this).html($(this).attr("data-loading-text"));
        $(this).attr("disabled", "disabled");
        $(this).addClass("disabled");

        var submitForm = $("#WorkshopActivities  div.tab-pane.active").find("form");
        $(submitForm).submit();
      });

      $(document).on( "click", "#WorkshopActivity .updateWorkshopActivityFake", function(){
        var submitForm = $("#WorkshopActivity").find("form");
        $(submitForm).submit();
      });

      $("ul.workshop_activities_list_edit").sortable({
        handle: ".sorthandler",
        start: function(event, ui){
          _onStartDragWorkshopActivity(event, ui);
        },
        stop: function(event, ui){
          _onStopDragWorkshopActivity(event, ui);
        }
      });

      var ck_editor_initial_data;
      var _onStartDragWorkshopActivity = function(event, ui){
        //save the ckeditor iframe, because when moving the iframe in the DOM the iframe is restored
        //only if the workshop_activity is paragraph of text or assignment (i.e. has ckeditor)
        if($(ui.item).attr("type")==="WaText" || $(ui.item).attr("type")==="WaAssignment"){
          var theid = $(ui.item).find("textarea").attr("id");
          ck_editor_initial_data = CKEDITOR.instances[theid].getData();
        }
      };

      var _lastActivitiesOrder;
      var _onStopDragWorkshopActivity = function(event, ui){
        //restore the iframe of the ckeditor
        if($(ui.item).attr("type")==="WaText" || $(ui.item).attr("type")==="WaAssignment"){
          var theid = $(ui.item).find("textarea").attr("id");
          setTimeout(function(){CKEDITOR.instances[theid].setData(ck_editor_initial_data);}, 0);
          //CKEDITOR.instances[theid].setData(ck_editor_initial_data);
        }
        //get activitiesOrder and send them
        var activitiesOrder = _getCurrentWorkshopActivitiesOrder();
        if(activitiesOrder!=_lastActivitiesOrder){
          _lastActivitiesOrder = activitiesOrder;
          _sendNewActivitiesOrder(activitiesOrder);
        }
      };

      var _getCurrentWorkshopActivitiesOrder = function(){
        var activitiesOrder = [];
        $("li[workshop_activity_id]").each(function(index,li){
          activitiesOrder.push($(li).attr("workshop_activity_id"));
        });
        return activitiesOrder;
      };

      var _sendNewActivitiesOrder = function(activitiesOrder){
        //Update workshop with the new activities order
        $.ajax({
          type: "PUT",
          url: '<%= workshop_path(@workshop) %>',
          dataType: 'json',
          data: {
            "workshop_activities_order": JSON.stringify(activitiesOrder)
          },
          success:function(response){
          },
          error:function (xhr, ajaxOptions, thrownError){
            _lastActivitiesOrder = undefined;
          }
        });
      };

      $(".actions_tooltip").tooltip({ placement: 'bottom'});

      //Move scroll to the last created activity
      <% unless params[:activity].blank? %>
        var workshop_activity_anchor = "<%=params[:activity]%>";
        setTimeout(function(){
          var vishHeader = $("#wrap > header.navbar.navbar-fixed-top");
          var workshopHeader = $("#wrap div.toolbar_nav-tab_workshop");
          var scrollMargin = 25;
          var headersHeight = $(vishHeader).height() + $(workshopHeader).height() + scrollMargin;
          $("li[workshop_activity_id=" + workshop_activity_anchor + "]")[0].scrollIntoView(true);
          if(window.scrollY){
            if((headersHeight > 0)&&(window.scrollY - headersHeight > 0)){
              window.scroll(0, window.scrollY - headersHeight);
            }
          }
        },1500);
      <% end %>

  <% end %>

</div>

